<template>
    <!-- 图表容器 -->
    <div class="chart-container">
        <h3 class="chart-title">{{ title }}</h3>
        <div ref="chartRef" class="chart" :style="{ height: height }"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    title: String,
    type: {
        type: String,
        default: 'bar',
        validator: (value) => ['bar', 'line', 'pie', 'radar'].includes(value)
    },
    height: {
        type: String,
        default: '300px'
    }
});

const chartRef = ref(null);
let chart = null;

const initChart = () => {
    if (!chartRef.value) return;
  
    chart = echarts.init(chartRef.value);
  
    // 根据类型生成示例数据
    let option = {};
  
    if (props.type === 'bar') {
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLine: {
                    lineStyle: {
                        color: '#4facfe'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#4facfe'
                    }
                }
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#00f2fe' },
                        { offset: 1, color: '#4facfe' }
                    ])
                }
            }],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            }
        };
    } else if (props.type === 'line') {
        option = {
            xAxis: {
                type: 'category',
                data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                axisLine: {
                    lineStyle: {
                        color: '#4facfe'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#4facfe'
                    }
                }
            },
            series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#00f2fe',
                    width: 3
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(0, 242, 254, 0.5)' },
                        { offset: 1, color: 'rgba(0, 242, 254, 0.1)' }
                    ])
                }
            }]
        };
    } else if (props.type === 'pie') {
        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center',
                textStyle: {
                color: '#fff'
                }
            },
            series: [
                {
                    name: '数据分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#0a192f',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold',
                            color: '#fff'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: '区域A' },
                        { value: 735, name: '区域B' },
                        { value: 580, name: '区域C' },
                        { value: 484, name: '区域D' },
                        { value: 300, name: '区域E' }
                    ],
                    color: ['#00f2fe', '#4facfe', '#8e2de2', '#4a00e0', '#00b4d8']
                }
            ]
        };
    }
  
    chart.setOption(option);
  
    // 响应式调整
    window.addEventListener('resize', () => {
        chart.resize();
    });
};

onMounted(() => {
    initChart();
});

// 监听类型变化
watch(() => props.type, () => {
    if (chart) {
        chart.dispose();
        initChart();
    }
});
</script>

<style lang="scss" scoped>
.chart-container {
  @extend .glass-panel !optional;
  padding: 15px;
  height: 100%;
}

.chart {
  width: 100%;
  height: calc(100% - 30px);
}
</style>